<template>
    <article class="user-main ub-img-bg" :style="{'min-height': mHeight + 'px'}">
        <div class="reg-wrap">
            <p>刘豪杰</p>
            <!-- <div class="tx-c"><img class="reg-logo" src="//oss.bxmex.com/web/download/logo/bxmex_logo.png"></div> -->

            <div class="reg-con mt15">
                <el-form class="login-form" autoComplete="on" :model="formData" :rules="rules" ref="loginForm" label-position="left">
                    <el-form-item prop="username" class="mt80">
                        <el-input placeholder="账户" prefix-icon="ot-icon-user" v-model="formData.username" clearable></el-input>
                    </el-form-item>
                    <el-form-item prop="password" class="mt40">
                        <el-input type="password" placeholder="密码" prefix-icon="ot-icon-lock" v-model="formData.password" clearable @keyup.enter.native="handleLogin"></el-input>
                    </el-form-item>


                    <el-button class="mt40" type="primary" style="width: 100%" :loading="loading" @click.native.prevent="handleLogin">登录</el-button>

                </el-form>
            </div>
        </div>
    </article>
</template>

<script>
import { APIlogin, APIgetUserMessage } from 'api'

import {  } from 'utils/validate'
import { setToken, setPerson, setCookie } from 'utils/auth' // 验权

export default {
    data(){

        return {
            mHeight: window.screen.height - 520,
            
            formData: {
                areaCode: '86',
                username: '',
                password: ''
            },
            rules: {
                username: [{ required: true, trigger: ['blur', 'change']}],
                password: [{ required: true, trigger: ['blur', 'change']}]
            },
            loading: false
        }
    },
    components: {

    },
    computed: {

    },
    beforeDestroy: function(){

    },
    mounted(){

        this.init();
    },
    methods:{
        init(){ 

        },

        handleLogin() {
            this.$refs.loginForm.validate(valid => {
                if (valid) {
                    this.loading = true;

                    let ops = this.formData;
                    ops.host = '6bbicon';
                    // APIlogin(ops).then(res => {
                    if (ops.username === 'admin' && ops.password === 'abc123456'){

                        setToken('eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiIxNDk5MTM5NDk2NTE4NjE1MDQwIiwiZXhwIjoxNTkwNDkzMzY5fQ.2GS-eQfyssNMReg2s-hXXjVNLNsBlmhlP61yQcRFWts'); //设置登录状态
                        setPerson(JSON.stringify({username: ops.username}));
                        

                        this.$message({
                            type: 'success',
                            message: '登录成功!'
                        });

                        this.loading = false;
                        location.href = 'index.html'
                    } else {
                        this.loading = false;
                        this.$message({
                            type: 'error',
                            message: '账号密码错误!'
                        });
                    }

                    // }, err => {
                    //     this.loading = false;
                    // })
                } else {
                    console.log('error submit!!')
                    return false
                }
            })
        }
    }
}

</script>

<style>
.el-select .el-input__inner {width: 80px;}
</style>
<style scoped>
.user-main{padding: 0 !important;background-color: #161A25;color:#fff;background-image: url(//bicoin.oss-cn-beijing.aliyuncs.com/images/ot-pc/bannerbg.png);}

.reg-wrap{width: 30%;margin: 0 auto;padding: 100px 0 70px;}
.reg-logo{width: 180px;height: auto;}
.reg-con{}
.reg-inline>*{display: block;}
</style>


